{include file="public/head"}
<div class="main">
    {include file="public/left"}
    <div class="middle">
    {include file="public/header"}
    <div class="regist_tab">
        <ul class="regist_in">
            <dl class="regist_title"><i class="layui-icon">&#xe612;</i><i class="layui-icon">&#xe648;</i><span>{:__('用户注册')}</span></dl>
            <dl class="regist_option">
                <dd class="regist_sub">
                    <div class="regist_acc">
                        <label nowrap="nowrap">{:__('用户名')}：</label>
                        <input autocomplete="off" id="account" class="layui-input" type="text"/>
                        <span id="account_tip"></span>
                        <span class="point">*</span>
                        <span class="regist_tip">{:__('必须通过用户名登录平台')}</span>
                    </div>
                    <div class="regist_pwd">
                        <label nowrap="nowrap">{:__('设置密码')}：</label>
                        <input autocomplete="off" id="pwd" class="layui-input" type="password"/>
                        <span id="pwd_tip"></span>
                        <span class="point">*</span>
                        <span class="regist_tip">{:__('密码输入6-20字符之间')}</span>
                    </div>
                    <div class="regist_pwd2">
                        <label nowrap="nowrap">{:__('重复密码')}：</label>
                        <input autocomplete="off" id="pwd2" class="layui-input" type="password"/>
                        <span id="pwd2_tip"></span>
                        <span class="point">*</span>
                        <span class="regist_tip">{:__('请重复输入密码')}</span>
                    </div>
                    <div class="regist_email">
                        <label nowrap="nowrap">{:__('电子邮箱')}：</label>
                        <input autocomplete="off" id="email" class="layui-input" type="text"/>
                        <span id="email_tip"></span>
                        <span class="point">*</span>
                        <span class="regist_tip">{:__('格式')}：user@gmail.com</span>
                    </div>
                    <div class="regist_captcha">
                        <label nowrap="nowrap">{:__('验证码')}：</label>
                        <input autocomplete="off" id="captcha" class="layui-input" type="text"/>
                        <iframe class="captcha_img" src="/api/captcha"></iframe>
                    </div>
                    <div class="captcha_tip">
                        <a style="margin-left: 0px;" id="_clear" class="_clear">{:__('看不清，换一张')}</a>
                        <span>{:__('会员资料一经提交，即表示您阅读并同意我们的服务条款')}</span>
                    </div>
                    <!-- layui-form-checked -->
                    <div class="log_btn">
                        <button type="button" class="layui-btn layui-btn-lg layui-btn-normal">{:__('提交')}</button><a href="/index/Index/login" style="font-size: 12px;">{:__('我已经有账号立即登录>>（投稿建议使用电脑操作）')}</a>
                    </div>
                </dd>
            </dl>
        </ul>
        <ul class="no_log">
            <dl class="no_log_service">
                <p class="serve_intro">{:__('注册后您可以享受以下服务')}</p>
                <div class="no_log_get">
                    <p class="get_img money">{:__('赏')}</p>
                    <p class='get_info'>
                        <span>{:__('我要悬赏')}</span>
                        <span>{:__('更低的成本，更多的选择')}</span>
                    </p>
                </div>
                <div class="no_log_get">
                    <p class="get_img getmoney">$</p>
                    <p class='get_info'>
                        <span>{:__('我要赚钱')}</span>
                        <span>{:__('能力变现，有本事你就来')}</span>
                    </p>
                </div>
            </dl>
        </ul>
    </div>
    {include file="public/foot"}
    </div>
    {include file="public/right"}
</div>
{include file="public/footer"}
<script>
    if($.cookie("think_lang") == 'en-us'){
        $(".money").css("font-size","17px");
    }
    
    var errorhtl = "<i style='color:rgb(230,46,4);margin-left:5px' class='fa fa-times-circle'></i>";
    var successhtl = "<i style='color:rgb(117,184,64);margin-left:5px' class='fa fa-check-circle-o'></i>";
    $("#account").blur(function(){
        var account = $("#account").val().replace(/ /g,'');
        if(account == ''){
            $("#account_tip").html("");
            return false;
        }
        var _this = $(this);
        if(account.length<3){
            layer.tips("{:__('用户名太短,必须3个字符以上')}",_this);
            $("#account_tip").html(errorhtl);
            return false;
        }
        if(account.length>20){
            layer.tips("{:__('用户名不超过20个字符')}",_this);
            $("#account_tip").html(errorhtl);
            // $(this).siblings(".regist_tip").html("{:__('用户名不超过20个字符')}");
            // $(this).siblings(".regist_tip").css("color",'red !important');
            return false;
        }
        $.ajax({
            url:'/api/user/verifyExist',
            type:"post",
            data:{username:account},
            success:function(ret){
                if(ret['data'] != '' && ret['data'] != undefined && ret['data'] != null && 
                ret['data']['exists'] != '' && ret['data']['exists'] != undefined && ret['data']['exists'] != null){
                    if(ret['data']['exists'] == 1){
                        layer.tips("{:__('用户已存在')}",_this);
                        $("#account_tip").html(errorhtl);
                        return false;
                    }
                }
                $("#account_tip").html(successhtl);
            }
        });
    });
    $("#pwd").blur(function(){
        var pwd = $("#pwd").val();
        if(pwd == ''){
            $("#pwd_tip").html();
            return false;
        }
        var _this = $(this);
        if(pwd.length<6 || pwd.length>20){
            layer.tips("{:__('密码在6-20字符之间')}",_this);
            $("#pwd_tip").html(errorhtl);
            return false;
        }
        if(pwd.indexOf(" ") != -1){
            layer.tips("{:__('密码不能有空格')}",_this);
            return false;
        }
        $("#pwd_tip").html(successhtl);
    });
    $("#pwd2").blur(function(){
        var pwd = $("#pwd").val();
        var pwd2 = $("#pwd2").val();
        if(pwd2 == ''){
            $("#pwd2_tip").html();
            return false;
        }
        var _this = $(this);
        if(pwd != pwd2){
            layer.tips("{:__('密码不一致')}",_this);
            $("#pwd2_tip").html(errorhtl);
            return false;
        }
        $("#pwd2_tip").html(successhtl);
    });
    $("#email").blur(function(){
        var email = $("#email").val();
        if(email == ''){
            $("#email_tip").html();
            return false;
        }
        var _this = $(this);
        if(emailCheck(email) === false){
            layer.tips("{:__('Email格式错误')}",_this);
            $("#email_tip").html(errorhtl);
            return false;
        }
        $.ajax({
            url:'/api/user/verifyExist',
            type:"post",
            data:{email:email},
            success:function(ret){
                if(ret['data'] != '' && ret['data'] != undefined && ret['data'] != '' && 
                ret['data']['exists'] != '' && ret['data']['exists'] != undefined && ret['data']['exists'] != ''){
                    if(ret['data']['exists'] == 1){
                        layer.tips("{:__('邮箱已存在')}",_this);
                        $("#email_tip").html(errorhtl);
                        return false;
                    }
                }
                $("#email_tip").html(successhtl);
            }
        });

    });

    $(".log_btn button").click(function(){
        var account = $("#account").val();
        var accouttmp = account.replace(/ /g,'');
        var pwd = $("#pwd").val();
        var pwd2 = $("#pwd2").val();
        var email = $("#email").val();
        var captcha = $("#captcha").val();
        if(account == ''){
            layer.msg("{:__('用户名不能为空')}",{icon:2});
            return false;
        }
        if(accouttmp.length<3){
            layer.msg("{:__('用户名太短,必须3个字符以上')}",{icon:2});
            return false;
        }
        if(accouttmp.length>20){
            layer.msg("{:__('用户名不超过20个字符')}",{icon:2});
            return false;
        }
        if(pwd.length<6 || pwd.length>20){
            layer.msg("{:__('密码在6-20字符之间')}",{icon:2});
            return false;
        }
        if(pwd == ''){
            layer.msg("{:__('密码不能为空')}",{icon:2});
            return false;
        }
        if(pwd2 == ''){
            layer.msg("{:__('重复密码不能为空')}",{icon:2});
            return false;
        }
        if(email == ''){
            layer.msg("{:__('Email不能为空')}",{icon:2});
            return false;
        }
        if(emailCheck(email) === false){
            layer.msg("{:__('Email格式错误')}",{icon:2});
            return false;
        }
        if(captcha == ''){
            layer.msg("{:__('验证码不能为空')}",{icon:2});
            return false;
        }
        if(pwd != pwd2){
            layer.msg("{:__('密码不一致')}",{icon:2});
            return false;
        }
        $.ajax({
            url:'/api/user/register',
            type:'post',
            data:{'username':account,'password':pwd,'email':email,'captcha':captcha},
            success:function(ret){
                if(ret.code == 0){
                    layer.msg(ret.msg,{icon:2},function(){
                        $(".captcha_img")[0].attributes[1].ownerElement.contentWindow.window.location.reload();
                    });

                } else if(ret.code != 401){
                    layer.msg(ret.msg,{icon:1},function(){
                        if(ret.code == 1){
                            window.location.href='login';
                        }
                    });
                }
            }
        });
    });
    $("#_clear").click(function(){
        $(".captcha_img")[0].attributes[1].ownerElement.contentWindow.window.location.reload()
    });
</script>
